<main>
<h1>Server Sent Events (SSE)</h1>

<p>SSE create a lightweight, uni-directional connection from your server to a client's web browser.  They are often easier to manage than WebSockets, and are built on top ofHTTP connections (making them less likely to be blocked by firewalls).</p>
<p>As of version 1.7, SSE support has been moved into a new extension, and the existing <b>hx-sse</b> tag has been deprecated.  All future development will occur in the extension code, and the deprecated tag will be removed in htmx version 2.0</p>

<h3>Required Attributes</h3>
<table>
<tr>
	<td class="bold nowrap">hx-ext</td>
	<td>Make sure the SSE extension is initialized on every page or page fragment where you use SSE streams.</td>
</tr>
<tr>
	<td class="bold nowrap">sse-connect</td>
	<td>Connects to a SSE event stream</td>
</tr>
<tr>
	<td class="bold nowrap">sse-swap</td>
	<td>Specifies the messages that a particular DOM element will listen to.</td>
</tr>
</table>

<h3>Example Code</h3>

<pre class="code">
&lt;body hx-ext="sse"&gt;
&lt;div sse-connect="https://my.sse.server.com" sse-swap="message"&gt;&lt;/div&gt;
&lt;/body&gt;
</pre>
<h3>SSE Resources</h3>
<ul>
	<li><a href="https://en.wikipedia.org/wiki/Server-sent_events" target="_blank">Wikipedia</a></li>
	<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events" target="_blank">MDN Web Docs</a></li>
	<li><a href="https://caniuse.com/eventsource" target="_blank">Can I Use?</a></li>
</ul>
</main>
